<!DOCTYPE html>  
<html>
<meta charset="utf-8" />  
<title>函数节流和函数防抖</title>  
<body>
    <h2>函数节流和函数防抖</h2> 
    <button id='throttle'>函数节流</button>
    <button id='debounce'>函数防抖</button>
</body>
<script>
    // 函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。
    // 函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。


    // 节流
    var throttle = document.getElementById('throttle');
    var ifClick = false;
    throttle.onclick=function(){
        console.log('ifClick',ifClick)
        if(ifClick){
            return;
        }
        ifClick=true;
        setTimeout(()=>{
            alert('a')
            ifClick=false;
        },2000)
    }

    // 防抖
    //函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
    //如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
    //如果计时完毕，没有方法进来访问触发，则执行代码。
    var debounce = document.getElementById('debounce');

    var timer = false;
    debounce.onclick = function(){
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(function(){
            console.log("函数防抖");
        }, 300);
    }; 






    const div = document.getElementById('div')
    let ifClick = false;
    div.onClick = function() {
        if(ifClick) return
        ifClick = true
        setTimeout(()=>{
            console.log('over')
            ifClick = false
        },1000)
    }

    var timer = null
    div.onClick = function() {
        timer&&clearTimeout(timer)
        timer = setTimeout(()=>{
            console.log('over')
            timer = null
        }, 1000)
    }

</script>
</html>